<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>训练页面</title>
    <style>
        .container{            
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;   
            left: 0px;
            top:0px;         
            width: 454px;
            height: 454px;
            background-color: black;
            border-radius: 50%;
        }
        .txt{
            font-size: 30px;
            text-align: center;
            width: 400px;
            height: 40px;
            color:white;
        } 
        .txt1{
            font-size: 38px;
            text-align: center;
            width: 400px;
            height: 40px;
            color:white;
        }         
        .btn{
            width: 300px;
            height: 50px;
            font-size: 38px;
            background-color: #000;
            border-color: #000;
            color: white;
            margin-top: 10px;
        }     
        .box{
            display: inline;
        }  
        .img{
            width: 208px;
            height: 208px;
            animation-name: ad;
            border-radius: 50%;
            margin-top: 20px;
        }
        @keyframes ad{
            0%{transform: rotate(0deg);}
			100%{transform: rotate(360deg);}
        }
		.sb{
			color:#FFF;
			font-size:18px;
		}
		#t1{
			color: aliceblue;
			font-size: 24px;
		}
    </style>
</head>
<body>
    <div class="container">
        <image class="img" src='image/hm.png'></image>
        <div class="box">
        <text class='txt1'>吸气</text>
        <text class='txt1'></text></div>
        <text class='txt'></text>
		<text id='t1'></text>
        <input type="button" value="点击重新开始" class='btn'>
    </div>    
</body>

<script>    
    var btn=document.getElementsByClassName('btn')[0];    
        
    btn.onclick=function()
    {
        location.href='./index.html';
    }
    var lastname=localStorage.getItem('key');
    console.log('接收到左边选择器的数值：'+lastname); 
    var lastname1=localStorage.getItem('key1');
    console.log('接收到左边选择器的数值：'+lastname1); 
    var text=document.getElementsByClassName('txt')[0];
    var z;
    if(lastname1=='较慢'){z=6}
    else if(lastname1=='舒缓'){z=4}
    else if(lastname1=='较快'){z=2}
    var x=12;
    text.innerHTML='总共需要坚持'+x+'秒';
    var y=x;
    var timer=setInterval(run,1000);
    function run(){
        y--;
        text.innerHTML='再坚持'+y+'秒';
        if(y==0){clearInterval(timer);timer=null;text.style.display='none';
				document.getElementById("t1").innerHTML='右滑查看训练报告'
				}
    }
    var text1=document.getElementsByClassName('txt1')[0];
    var timer1=setInterval(run1,z*1000);
    var count=0;
    function run1(){
        count++;
        if(count*z!=x){if(text1.innerHTML=='吸气'){text1.innerHTML='呼气'}else if(text1.innerHTML=='呼气'){text1.innerHTML='吸气'}}
        else{text1.innerHTML='已完成'}
    }
    var percent=0;
    var timer2=setInterval(run2,z/100*1000);
    
    function run2(){
        percent++;
        if(percent==100){percent=0};
        if(timer==null){clearInterval(timer2);timer2=null;percent=100;};
        text2.innerHTML='('+percent+'%)';
    }var text2=document.getElementsByClassName('txt1')[1];
    
    var img=document.getElementsByClassName('img')[0];
    img.style.animationDuration=z+'s';
    img.style.animationIterationCount=x/z;
	var div=document.getElementsByClassName('container')[0];
	var qix=qiy=zhongx=zhongy=0;
	div.onmouseover=function(e){
		qix=e.screenX;
		qiy=e.screenY;
	}
	div.onmouseout=function(e){
		zhongx=e.screenX;
		zhongy=e.screenY;
		if(zhongx-qix>=100){
			location.href='bg.html';
			}
			}
</script>
</html>